<span
  class="devui-tag-item {{ size }}-size {{ labelStyle }}"
  [style.display]="deleteTag ? 'none' : 'block'"
  [ngClass]="{
    'devui-colorful-tag': isColorfulTag,
    'devui-selected-tag': checked,
    'devui-deletable-tag': mode === 'closeable' || deletable,
    'devui-checkable-tag': mode === 'checkable'
  }"
  [ngStyle]="{
    'border-color': customColor,
    'background-color': isColorfulTag ? (checked ? customColor : '') : '',
    color: isColorfulTag ? (checked ? '#fff' : customColor) : '',
    cursor: this.mode === 'checkable' ? 'pointer' : ''
  }"
  title="{{ titleContent ? titleContent : currentTag }}"
  (click)="tagClick()"
>
  <div class="content-wrapper" [ngStyle]="{ 'background-color': colorMap[labelStyle] || customColor }"></div>
  <span *ngIf="!customViewTemplate" [class.devui-max-width-tag]="maxWidth" [style.maxWidth]="maxWidth || ''">{{ currentTag }}</span>
  <ng-template *ngIf="customViewTemplate" [ngTemplateOutlet]="customViewTemplate" [ngTemplateOutletContext]="{ tag: tag }"></ng-template>
  <a class="remove-button" *ngIf="mode === 'closeable' || deletable" (click)="removeTag($event, tag)">
    <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(3.000000, 3.000000)" fill="#71757F" fill-rule="nonzero">
          <path
            [ngStyle]="{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }"
            d="M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 -0.353553391,-0.353553391 Z"
          ></path>
          <path
            [ngStyle]="{ fill: isColorfulTag ? (checked ? '#fff' : customColor) : '' }"
            d="M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 -0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 L9.64644661,-0.353553391 Z"
          ></path>
        </g>
      </g>
    </svg>
  </a>
</span>
